﻿@page "/AutoComplete/Default-Functionalities"

@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the default functionalities of the AutoComplete in Blazor application. Type a character in the AutoComplete element and choose an item from the suggestion list.</p>
</SampleDescription>
<ActionDescription>
   <p>The <code>AutoComplete</code> component provides the matched suggestion list when a character is typed in the input, from that theuser can select one.</p> By default, the filter type value is <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_FilterType' target='_blank'> Contains</a>.
   <p>The default sample illustrates the use of AutoComplete that allows the end-users to select an item from the suggestion list.</p>
   <p>More information on the AutoComplete instantiation can be found in the<a href='https://blazor.syncfusion.com/documentation/autocomplete/getting-started/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="control_wrapper">
        <SfAutoComplete TValue="string" TItem="GameFields" Placeholder="e.g. Basketball" DataSource="@Games">
            <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
        </SfAutoComplete>
    </div>
</div>

<style>
    .control_wrapper {
        width: 350px;
        margin: 0 auto;
        padding-top: 70px;
    }
</style>

@code{
    public class GameFields
    {
        public string ID { get; set; }

        public string Text { get; set; }
    }

    public List<GameFields> Games = new List<GameFields>()
{
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
        new GameFields(){ ID= "Game5", Text= "Football" },
        new GameFields(){ ID= "Game6", Text= "Golf" },
        new GameFields(){ ID= "Game7", Text= "Hockey" },
        new GameFields(){ ID= "Game8", Text= "Rugby"},
        new GameFields(){ ID= "Game9", Text= "Snooker" },
        new GameFields(){ ID= "Game10",Text= "Tennis"},
    };
}
